<template>
  <div class='container'>
    <el-card>
    {{title}} <hr>
      <el-form  label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="学科："   prop="subjectID">
          <el-select type="subjectID" v-model="form.subjectID"  @change="changesubject">
            <el-option v-for="item in subjects" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-select type="catalogID" v-model="form.catalogID">
            <el-option v-for="item in directorys" :key='item.id' :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select type="enterpriseID" v-model="form.enterpriseID">
            <el-option v-for="(item) in enterprises" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="province">
          <el-select type="province" v-model="form.province" @change="clickoption()">
            <el-option v-for="(item,index) in provinces" :key="index" :label="item" :value="item" ></el-option>
          </el-select>
          {{ }}<el-select type="city" v-model="form.city">
            <el-option v-for="(item,index) in citys" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向：" prop="direction">
          <el-select type="direction"  v-model="form.direction">
            <el-option v-for="item in direction" :key="item.id" :label="item" :value="item"></el-option>

          </el-select>

        </el-form-item>
        <el-form-item label="题型：" prop="questionType">

            <el-radio v-model="form.questionType" label="1" name="pattern" @change="ishows('1')">单选</el-radio>
            <el-radio v-model="form.questionType" label="2" name="pattern" @change="ishows('2')">多选</el-radio>
            <el-radio v-model="form.questionType" label="3" name="pattern" @change="ishows('3')">简答</el-radio>

        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
           <el-radio  v-model="form.difficulty" label="1" name="pattern" >简单</el-radio>
            <el-radio  v-model="form.difficulty" label="2" name="pattern" >一般</el-radio>
            <el-radio  v-model="form.difficulty" label="3" name="pattern" >困难</el-radio>
        </el-form-item>
        <el-form-item label="题干" class="quillEditor" prop="question">
          <quillEditor v-model="form.question" class="quillEditors"></quillEditor>
        </el-form-item>
        <el-form-item label="选项：" class="checkInput" v-show="ishowall" prop="options">
            <div v-for="(item,index) in form.options" :key="index">
              <el-radio v-if="form.questionType === '1'" v-model="item.isRight" @change="ishows('1',item)" class="Allcheckbox" :label="true">
                {{item.code + ':'}}
                <el-input v-model="item.title" ></el-input>
              </el-radio>
               <el-checkbox v-if="form.questionType === '2'" :label="true" v-model="item.isRight"  class="Allcheckbox" >
               {{item.code + ':'}}
              <el-input v-model="item.title" ></el-input>
              </el-checkbox>
              <div class="fileImg">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-success="(res,flie)=>{handleAvatarSuccess(item,res,flie)}"
                    :show-file-list="false"
                    >
                    <span v-if="item.img">
                    <img :src="item.img" alt="" width="100%">
                    </span>
                    <span v-else>上传文件</span>
                  <span><img src="~@/assets/Snipaste_2021-11-15_17-26-41.jpg" class="imgdel" alt=""></span>
                  </el-upload><br>
              </div>
            </div>
             <!-- <el-checkbox label="B:" name="B" class="Allcheckbox">
            B: <el-input v-model="form.option.title" ></el-input>
            </el-checkbox>
            <div class="fileImg" @click='activeImg'>上传文件
              <el-input type="file" disabled ref='file'></el-input>
            <span><img src="~@/assets/Snipaste_2021-11-15_17-26-41.jpg" class="imgdel" alt=""></span>
            </div><br>
             <el-checkbox label="C:" name="C" class="Allcheckbox">
            C: <el-input v-model="form.option.title" ></el-input>
            </el-checkbox>
            <div class="fileImg" @click='activeImg'>
              <span>上传文件</span>
              <el-input type="file" disabled ref='file'></el-input>
              <span><img src="~@/assets/Snipaste_2021-11-15_17-26-41.jpg" class="imgdel" alt=""></span>
            </div><br>
             <el-checkbox label="D:" name="D" class="Allcheckbox">
            D: <el-input v-model="form.option.title"></el-input>
            </el-checkbox>
            <div class="fileImg" @click='activeImg'>上传文件
              <el-input type="file" disabled ref='file'></el-input>
            <span><img src="~@/assets/Snipaste_2021-11-15_17-26-41.jpg" class="imgdel" alt=""></span>
            </div> -->
          <el-button type="danger" :disabled='ishow' style="margin: 10px;" @click="addoptionsandanswers">+添加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频：" label-width="100px" prop="videoURL">
          <el-input type=""  size="medium" class="inputel" v-model="form.videoURL"></el-input>
        </el-form-item>
          <el-form-item label="答案解析" class="quillEditor" prop="answer">
          <quillEditor v-model="form.answer" class="quillEditors"></quillEditor>
        </el-form-item>
        <el-form-item label="题目备注：" label-width="100px" prop="remarks">
          <div class="textarea">
            <el-input type="textarea" v-model="form.remarks" size="medium" class="inputarea"  :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </div>
        </el-form-item>
         <el-form-item label="试题标签：" prop="tags">
          <el-select type="tags" placeholder="请选择试题标签" v-model="form.tags" >
            <el-option v-for="item in tags" :key='item.id' :value="item.tagName">{{item.tagName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clicksubmit">{{submittitle}}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { direction } from '@/api/hmmm/constants.js'

import { list } from '@/api/hmmm/subjects.js'
import { list as lists } from '@/api/hmmm/companys.js'
import { add, update, detail as changeDetail } from '@/api/hmmm/questions.js' // 基础题库
import { list as directory, detail } from '@/api/hmmm/directorys.js' // 目录
import { list as tagsList } from '@/api/hmmm/tags.js'

import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  name: 'questions',
  // 富文本编辑器
  components: { quillEditor },
  data () {
    return {
      title: '试题录入',
      zimubiao: [],
      ishow: true,
      ishowall: true,
      provinces: [],
      citys: [],
      subjects: [], // 学科
      enterprises: [],
      direction: [],
      directorys: [],
      subject: [],
      tags: [],
      form: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        enterpriseID: null, // 企业
        province: null, // 省
        city: null, // 城市
        direction: null, // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: null, // 题干
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ], // 选项
        videoURL: '', // 解析视频
        // answer: null, // 答案解析
        remarks: '', // 题目备注
        tags: null // 试题标签
      },
      rules: {
        subjectID: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        catalogID: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        enterpriseID: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        province: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        direction: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        questionType: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        difficulty: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        question: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        answer: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        tags: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        options: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        videoURL: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ],
        remarks: [
          { required: true, message: '必填项不能为空', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  computed: {
    ID () {
      return this.$route.query.id
    },
    submittitle () {
      return this.$route.query.id ? '试题修改' : '试题添加'
    }
  },
  async created () {
    this.lists()
    this.provinces = provinces()
    console.log(direction)
    this.direction = direction
    this.ishows()
    console.log(this.$route.query.id, 'id数据')
    // console.log(this.provinces, 1)
    // console.log(citys('北京市'))
    if (this.$route.query.id) {
      const { data } = await changeDetail({ id: this.$route.query.id })
      console.log(data)
      this.form = data
    }
  },
  methods: {
    addoptionsandanswers () {
      // String.fromCharCode(65) 获取字母方法
      this.form.options.push({ id: '', code: String.fromCharCode(65 + this.form.options.length), title: '', img: '', isRight: false })
      console.log(String.fromCharCode(65 + this.form.options.length))
    },
    // 选择文件
    handleAvatarSuccess (item, res, file) {
      item.img = URL.createObjectURL(file.raw)
      console.log(URL.createObjectURL(file.raw))
    },

    // 学科目录的渲染
    async changesubject () {
      detail(this.form.subjectID)
      // console.log(data, 6666)
    },
    // 渲染城市和区
    clickoption () {
      // console.log(this.form.province, 7897)
      this.citys = citys(this.form.province)
    },
    // 获取基本数据 todo 需要优化
    async lists () {
      const { data: { items } } = await list({ page: 1, pagesize: 100 })
      // console.log(items, 1)
      this.subjects = items
      const { data: { items: itemss } } = await lists({ page: 1, pagesize: 100 })
      // console.log(itemss, 2)
      this.enterprises = itemss
      // const { data: { items: getitems } } = await getlist({ page: 1, pagesize: 100 })
      // console.log(getitems, 3)
      // this.direction = getitems
      const { data: { items: directorys } } = await directory({ page: 1, pagesize: 100 })
      // console.log(directorys, '目录列表')
      this.directorys = directorys

      const { data: { items: alltagsList } } = await tagsList({ page: 1, pagesize: 100 })
      console.log(alltagsList, 'dawd')
      this.tags = alltagsList
    },
    // 提交
    clicksubmit () {
      this.$refs.form.validate(async falg => {
        if (!falg) return this.$message.error('必填项不能为空')
        if (!this.$route.query.id) {
          // 这里是试题添加
          const { data } = await add(this.form)
          console.log(data, '这是试题添加的')
          this.$message.success('提交成功')
          this.$router.push('/questions/list')
          return
        }

        // 这里是试题修改
        console.log(1)
        // const { data } = await changeDetail(this.$route.query.id)
        // console.log(data, 6666666)
        if (this.form.remarks === null && this.form.videoURL === null) {
          this.form.remarks = ' '
          this.form.videoURL = ' '
        }
        const { data } = await update(this.form)
        console.log(data)
        this.$message.success('修改成功')
        this.$router.push('/questions/list')
      })
    },
    // 选择的显示与隐藏
    ishows (v, item) {
      // console.log(1)
      if (v === '1') {
        this.ishow = true
        this.ishowall = true
        this.form.questionType = v
        this.form.options.forEach(item => { item.isRight = false })
        console.log(v, item)
        if (!item) return
        item.isRight = true
      }
      if (v === '2') {
        this.ishow = false
        this.ishowall = true
        this.form.questionType = v
        this.form.options.forEach(item => { item.isRight = false })
      }
      if (v === '3') {
        this.ishowall = false
        this.form.questionType = v
        this.form.options.forEach(item => { item.isRight = false })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.quillEditor{
  height: 300px;
  margin-bottom: 10px;
  .quillEditors{
    height: 200px;
  }
}
.checkInput{
  position: relative;
  .Allcheckbox{
    margin-top: 30px;
  }
  .fileImg{
    position: absolute;
    left: 300px;
    width: 100px;
    height: 60px;
    // margin-bottom: 100px;
    margin-top: -60px;
    border: 1px dashed #000;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 12px;
    // .textspan{
    //   width: 50%!important;
    //   height: 50%!important;
    // }
  .imgdel{
    position: absolute;
    display: block;
    height:20px;
    width:20px;
    top: -5px;
    right: -10px;
  }
  }
  .fileImg:hover{
    border: 1px dashed rgb(235, 0, 0);

  }
  .el-input__inner{
    width: 100px!important;
  }
  .inputarea{
    height: 300px;
  }
  .textarea{
    width: 300px!important;
  }
}
</style>
